<template>
	<view class="box" >
		
		<view class="top">
			<view class="title">云主机</view>
			<view class="arrow-box" @click="arrowBoxHandler()">
				<image src="/static/arrow-right.svg" mode="aspectFit" class="right-arrow"></image>
			</view>
		</view>
		<view class="item-box">
			<view class="items" >
				<cloudHostItem v-for="itemInfo in cloudHostItemList" :key="itemInfo.name" :info="itemInfo"/>
		
			</view>
		</view>
		
		
		
		
		
	</view>
</template>

<script>
import cloudHostItem from '../cloud-host-item/cloud-host-item.vue';
	
	export default {
		name:"cloud-host",
		props:['value'],
		data() {
			return {
				cloudHostItemList:[
					{
						index:1,
						url:"/static/resources/popular-product/1-TanXingYunZhuJi.svg",
						name:"CPU"
					},
					{
						index:2,
						url:"/static/resources/popular-product/2-MySQL.svg",
						name:"磁盘"
					},
					{
						index:3,
						url:"/static/resources/popular-product/3-Postgresql.svg",
						name:"内存"
					},
					{
						index:4,
						url:"/static/resources/popular-product/4-DuiXiangCunChu.svg",
						name:"GPU"
					},
					{
						index:5,
						url:"/static/resources/popular-product/5-XiaZaiJiaSu.svg",
						name:"操作系统"
					},
					{
						index:6,
						url:"/static/resources/popular-product/6-JingTaiJiaSu.svg",
						name:"网卡"
					}]
			};
		},
		methods:{
			arrowBoxHandler(){
				uni.navigateTo({
					url: '/pages/cloud-host-detail/cloud-host-detail',
					// success: res => {},
					// fail: () => {},
					// complete: () => {}
				});
			}
		},
		components:{
			cloudHostItem:cloudHostItem
		},
		
	}
</script>

<style>
	.box{
		/* background-color: aquamarine; */
		padding-bottom: 100rpx;
	}
	
	
	
	
.top{
	height: 80rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 40rpx;
	
	
}

.title{
	height: 80rpx;
	width: 160rpx;
	/* background-color: beige; */
	text-align: center;
	line-height: 80rpx;
	font-size: 40rpx;
	font-weight: bolder;
	
}

.arrow-box{
	height: 80rpx;
	width: 80rpx;
	/* background-color: aqua; */
	 display: flex;
	  justify-content: center;
	  align-items: center;  

}

.right-arrow{
	height: 30rpx;
	width: 30rpx;
	
}
.item-box{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center; 
}
.items{

	width: 90%;
	text-align: center;
	
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 50rpx 0rpx;
	
	font-size: 25rpx;
}
</style>